<!--
 * @Description: effectScope的理解与使用
 * @Author: ZhangHan
 * @Date: 2025-06-17 16:39:36
 * @LastEditTime: 2025-06-17 17:10:40
 * @LastEditors: ZhangHan
 * @effectScope 理解: effectScope 是 Vue 3 中用于管理多个响应式副作用（如 effect、computed 等）的作用域。它允许你将一组副作用作为一个整体来处理，方便批量激活、停止或释放这些副作用。
 * @effectScope 使用示例: 以下是一个简单的 effectScope 使用示例，展示如何创建一个作用域并在其中运行副作用。
-->
<template>
  <div>
    <p>计数器: {{ count }}</p>
    <div>
      <ElButton @click="addCount">增加count</ElButton>
    </div>
    <ElButton @click="stopScope">停止作用域</ElButton>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  effectScope,
  watch,
  watchEffect,
  onScopeDispose,
  onUnmounted,
} from "vue";
import { ElButton } from "element-plus";

const count = ref(0);

const scope = effectScope();

//可嵌套
scope.run(() => {
  watch(count, (newValue) => {
    console.log("计数器的值变为: ", newValue);
  });

  watchEffect(() => {
    console.log("计数器的值变为: ", count.value);
  });

  // 当组件卸载时自动清理
  onScopeDispose(() => {
    console.log("Cleaning up effects");
  });
});

const addCount = () => {
  count.value++;
};

const stopScope = () => {
  // 停止整个作用域内的所有副作用
  scope.stop();
};

// 组件卸载时停止作用域
onUnmounted(() => {
  scope.stop();
});
</script>
